<template>
  <div class="centerRightTop">
    <el-row style="height:100%">
      <el-col style="height:100%;">
        <!-- 标题 -->
        <el-row style="height:3%;margin-top:4%">
          <el-col :span="1" :offset="1" >
            <span style="color:#5cd9e8;">
              <icon name="chart-bar"></icon>
            </span>
          </el-col>

          <el-col :span="10" :offset="1">
              <span class="text mx-2" style="font-size:12px;margin-bottom:5px">人员流动</span>
          </el-col>
        </el-row>

        <el-row style="height:3%;top:1.5%">
          <el-col :offset="3">
            <el-button type="goon" size = "mini" @click="jilei">桑基图</el-button>
            <el-button type="goon" size = "mini" @click="bing">饼状图</el-button>
          </el-col>
        </el-row>
        <!-- 其他数据 -->
        <el-row style="height:80%;left:7%;top:3%">
          <center-right-top v-if="type == 'jilei'"></center-right-top>
          <center-right-top-2 v-else></center-right-top-2>
        </el-row>
         
      </el-col>
    </el-row>
  </div>
</template>

<script>
import centerRightTop from './echarts/center/centerRightTopCart'
import centerRightTop2 from './echarts/center/centerRightTopCart2'
export default {
  data () {
    return{
      type: "jilei"
    }
  },
  components: {
    centerRightTop,
    centerRightTop2
  },
  mounted () {

  },
  methods: {
    jilei () {
      this.type = "jilei"
    },
    bing () {
      this.type = "bing"
    }
  }

}
</script>

<style lang="scss" scoped>
.centerRightTop{
  height: 100%;
  width: 100%;
}
</style>
